import { View, Text,Input,Label, Icon ,Textarea ,StyleSheet, Picker,Button,Form, Image  } from '@tarojs/components';
import React,{useState, useEffect} from 'react';
import { AtModal, AtModalHeader, AtModalContent, AtModalAction, AtToast,AtInput, AtForm } from "taro-ui";
import Taro, {useRouter, getCurrentInstance} from '@tarojs/taro';
import http from "../../../utils/http";
import './groupBianji.scss'

// jp

const groupBianji = () => {
  //模态框
  let [motai1, setMotai1] = useState(false);
  let [motai2, setMotai2] = useState(false);
  let [motai3, setMotai3] = useState(false);
  //提示
  let [tishi, setTishi] = useState(false);
  let [tishi1, setTishi1] = useState(false);
  //名称
  let [mc, setMc] = useState("");
  //拼团类型
  let [sel, setSel] = useState("");
  //时间
  let [selval1, setSelval1] = useState("2022-5-10");
  let [selval2, setSelval2] = useState("8:00");
  let [selval3, setSelval3] = useState("2022-5-10");
  let [selval4, setSelval4] = useState("8:00");
  //零售价
  let [price, setPrice] = useState('');
  //拼团价
  let [price1, setPrice1] = useState('');
  //份数
  let [fenshu,setFenshu] = useState('')
  //团数
  let [tuanshu,setTuanshu] = useState('')
  //提货时间
  let [tihuoTime,setTihuoTime] = useState('')
  //商品说明
  let [shuoming,setShuoming] = useState('')
 
  //封面
  let [fengmian, setFengmian] = useState("");
  //配图1
  let [peitu1, setPeitu1] = useState("");
  //配图2
  let [peitu2, setPeitu2] = useState("");
  //删除
  let [del,setDel] = useState(0)
  

  let Mesimg = i => {
    if (i.item) {
      return <Image src={i.item} className="img_button" />;
    }
    return <Button className="img_button">+</Button>;
  };
  let toMb = () =>{
    Taro.navigateTo({
      url: '/pages/Group/group_moban/groupMoban',
      events: {
        someEvent: function(data) {
          console.log(data)
        }
      },
      success: function(res) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
      }
    })
  }
  let faqipintuan = () =>{
    let StartTime = selval1
    let EndTime = selval3
    http({
      url: "/merchant/EditGroup",
      method: "post",
      data:{
        // gmId:'',
        gmTt:mc,
        gmPrice:price,
        goodsOldCost:price1,
        stId:'',
        gmXg:fenshu,
        gmNum:sel,
        gmStartTime:StartTime,
        gmEndTime:EndTime,
        gmRequiredTime:tihuoTime,
        gmDes:shuoming,
        gmNums:tuanshu,
        // gmState:'',
        gmisDelete:del,
        // gmCreatTime:'',
        goodsName:mc,
        goodsPic1Path:fengmian,
        goodsPic2Path:peitu1,
        goodsPic3Path:peitu2,
      }
    }).then(res => {
      console.log(res);
      if(res.data.code == 200){
        console.log("成功")
      }else{
        console.log("失败")
      }
    });
  }

  let baocunMb = () =>{
    let StartTime = selval1
    let EndTime = selval3
    http({
      url: "/merchant/GoodsMouldKeep",
      method: "post",
      data:{
        // gmId:'',
        gmTt:mc,
        gmPrice:price,
        goodsOldCost:price1,
        stId:'',
        gmXg:fenshu,
        gmNum:sel,
        gmStartTime:StartTime,
        gmEndTime:EndTime,
        gmRequiredTime:tihuoTime,
        gmDes:shuoming,
        gmNums:tuanshu,
        // gmState:'',
        gmisDelete:del,
        // gmCreatTime:'',
        goodsName:mc,
        goodsPic1Path:fengmian,
        goodsPic2Path:peitu1,
        goodsPic3Path:peitu2,
      }
    }).then(res => {
      console.log(res);
      if(res.data.code == 200){
        console.log("成功")
      }else{
        console.log("失败")
      }
    });
  }

  let xuanze = (a,b) =>{
    setSel(a)
    let e = '#' + b
    console.log(a)
    console.log(e)
    document.querySelector("#3人成团").style.backgroundColor = 'rgb(242, 242, 242)'
    document.querySelector("#5人成团").style.backgroundColor = 'rgb(242, 242, 242)'
    document.querySelector("#10人成团").style.backgroundColor = 'rgb(242, 242, 242)'
    document.querySelector("#20人成团").style.backgroundColor = 'rgb(242, 242, 242)'

    document.querySelector(e).style.backgroundColor = 'orange'
  }

  return (
    <View className='index'>
      <View className='header'>
        <Input id='headInput' type="text" placeholder='请输入拼团商品名称' 	placeholder-style='color: white;' value={mc} onInput={e=>{setMc(e.detail.value);}} focus />
      </View>

      <View className='mid'>
      <View
          className="up"
          onClick={() => {
            Taro.chooseImage({
              count: 1, // 默认9
              sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
              sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
              success: function(res) {
                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                setFengmian(res.tempFilePaths[0]);
              }
            });
          }}
        >
          <View>封面图</View>
          <Mesimg item={fengmian}></Mesimg>
        </View>
        <View
          className="up"
          onClick={() => {
            Taro.chooseImage({
              count: 1, // 默认9
              sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
              sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
              success: function(res) {
                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                setPeitu1(res.tempFilePaths[0]);
              }
            });
          }}
        >
          <View>配图</View>
          <Mesimg item={peitu1}></Mesimg>
        </View>
        <View
          className="up"
          onClick={() => {
            Taro.chooseImage({
              count: 1, // 默认9
              sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
              sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
              success: function(res) {
                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                setPeitu2(res.tempFilePaths[0]);
              }
            });
          }}
        >
          <View>配图</View>
          <Mesimg item={peitu2}></Mesimg>
        </View>
      </View>


      <View className='but'>
        <View>
          <View>拼团配置</View>
          <View onClick={toMb}>从模板库中选择</View>
        </View>
        <View>
          <Label>
            商品零售价
            <Input  type="number" value={price} onInput={e=>{setPrice(e.detail.value);}} focus />
          </Label>
          <Label>
            商品拼团价
            <Input  type="number" value={price1} onInput={e=>{setPrice1(e.detail.value);}} focus />
          </Label>
          
        </View>
        <View id='oss'>
          <View onClick={(event) =>xuanze(3,"3人成团")} id='3人成团' >3人成团</View>
          <View onClick={(event) =>xuanze(5,"5人成团")} id='5人成团' >5人成团</View>
          <View onClick={(event) =>xuanze(10,"10人成团")} id='10人成团' >10人成团</View>
          <View onClick={(event) =>xuanze(20,"20人成团")} id='20人成团' >20人成团</View>
        </View>
        <View>
          <Label>
            每人限购份数
            <Input  type="number" value={fenshu} onInput={e=>{setFenshu(e.detail.value);}} focus />
          </Label>
        </View>

        <View>
          <Label>
            总团数
            <Input  type="number" value={tuanshu} onInput={e=>{setTuanshu(e.detail.value);}} focus />
          </Label>
        </View>

        <View>
          <View>开始时间</View>
          <View>
          <Picker
            mode="date"
            name="select"
            value={selval1}
            onChange={e => {
              setSelval1(e.detail.value);
            }}
            className="picker"
          >
            <Input placeholder="" value={selval1} disabled></Input>
          </Picker>
          <Picker
            mode="time"
            name="select"
            value={selval2}
            onChange={e => {
              setSelval2(e.detail.value);
            }}
            className="picker"
          >
            <Input placeholder="" value={selval2} disabled></Input>
          </Picker>
          </View>
        </View>

        <View>
          <View>结束时间</View>
          <View>
          <Picker
            mode="date"
            range={sel}
            name="select"
            value={selval3}
            onChange={e => {
              setSelval3(e.detail.value);
            }}
            className="picker"
          >
            <Input placeholder="" value={selval3} disabled></Input>
          </Picker>
          <Picker
            mode="time"
            name="select"
            value={selval2}
            onChange={e => {
              setSelval4(e.detail.value);
            }}
            className="picker"
          >
            <Input placeholder="" value={selval4} disabled></Input>
          </Picker>
          </View>
        </View>
        <View>
          <Label>
            下单后提货时间
            <Input  type="text" value={tihuoTime} onInput={e=>{setTihuoTime(e.detail.value);}} focus />
          </Label>
        </View>

        <View>
          
            <View>商品说明</View>
            <View>
              <Textarea rows='10' value={shuoming} onInput={e=>{setShuoming(e.detail.value);}} focus />
            </View>
        </View>
      </View>

      {/* <Button onClick={ceshi}>点击</Button> */}

      <View  className='com-footer'>
      <View onClick={e=>{
        setTishi(true)
        baocunMb();
        console.log(1)
      }}>保存为模板</View>
      <View onClick={e=>{
        setMotai1(true)
        console.log(1)
      }}>提交审核</View>
    </View>

    <AtModal isOpened={motai1} className='AtModal' closeOnClickOverlay='false' onClose={ (event) =>{setMotai1(false)} }>
      <AtModalHeader className='AtModalHeader'>提示</AtModalHeader>
      <AtModalContent className='AtModalContent'>
        请仔细检查拼团内容
          保证内容无误
      </AtModalContent>
      <AtModalAction className='AtModalAction'> 
        <Button onClick={ (event) =>{
        setMotai1(!{motai1})
      }  }>再检查下</Button> 
        <Button onClick={ (event) =>{
        setMotai1(!{motai1})
        faqipintuan();
        setTishi1(!{tishi1})
        
      }  }>确认提交</Button> 
      </AtModalAction>
    </AtModal>

    <AtModal isOpened={motai2} className='AtModal' closeOnClickOverlay='false' onClose={ (event) =>{setMotai2(false)} }>
      <AtModalHeader className='AtModalHeader'>提示</AtModalHeader>
      <AtModalContent className='AtModalContent'>
        确认立即发布该拼团吗
        同时保存为拼团模板
      </AtModalContent>
      <AtModalAction className='AtModalAction'> 
        <Button onClick={ (event) =>{
        setMotai2(!{motai2})
        
      }  }>暂不</Button> 
        <Button onClick={ (event) =>{
        setMotai2(!{motai2})
        
      }  }>确认发布</Button> 
      </AtModalAction>
    </AtModal>

    <AtModal isOpened={motai3} className='AtModal' closeOnClickOverlay='false' onClose={ (event) =>{setMotai3(false)} }>
      <AtModalHeader className='AtModalHeader'>提示</AtModalHeader>
      <AtModalContent className='AtModalContent'>
        拼团发布成功
      </AtModalContent>
      <AtModalAction className='AtModalAction'> 
        <Button onClick={ (event) =>{
        setMotai3(!{motai3})
        
      }  }>查看拼团</Button> 
        <Button onClick={ (event) =>{
        setMotai3(!{motai3})
        
      }  }>立即分享</Button> 
      </AtModalAction>
    </AtModal>

    <AtToast 
    id='tishi' 
    onClick={(event) =>{
      setTishi(false)
    }  }
    onClose={(event) =>{
      setTishi(false)
    }  }
    isOpened={tishi} 
    text="已保存为模板" 
    hasMask='true'
    ></AtToast>

    <AtToast 
      id='tishi1' 
      onClick={(event) =>{
        setTishi1(false)
    }  }
    onClose={(event) =>{
      setTishi1(false)
    }  }
    isOpened={tishi1} 
    text="已提交审核" 
    hasMask='true'
    ></AtToast>

    <View id='last' onClick={e=>{setDel(-1)}}>删除拼团</View>
    </View>
  )
}
export default groupBianji;